<template>
  <el-dialog
    :title="title+'线索'"
    append-to-body
    :visible="visible"
    width="800px"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <el-form ref="form" class="myform" :rules="rules" :model="form" label-width="100px">
      <el-row :gutter="20">

        <el-col :span="12">
          <el-form-item label="线索状态" prop="status">
            <el-select v-model="form.status" style="width:100%">
              <el-option v-for="cs in clueStatus" :key="cs.value" :value="cs.value" :label="cs.label" />
            </el-select>
          </el-form-item>

          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" placeholder="请输入姓名" maxlength="20" />
          </el-form-item>

          <el-form-item label="线索来源" prop="source">
            <el-select v-model="form.source" style="width:100%">
              <el-option v-for="cs in clueSource" :key="cs.value" :value="cs.value" :label="cs.label" />
            </el-select>
          </el-form-item>

          <el-form-item label="电话" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入电话" maxlength="11" />
          </el-form-item>

          <el-form-item label="职务" prop="position">
            <el-input v-model="form.position" placeholder="请输入职务" maxlength="20" />
          </el-form-item>
          <el-form-item label="省市区" prop="areas">
            <RegionSelect v-model="form.areas" />
          </el-form-item>

          <el-form-item label="地址" prop="address">
            <el-input v-model="form.address" maxlength="255" placeholder="请输入地址" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="线索所有人" prop="">
            <el-input v-model="form.owner" placeholder="" maxlength="50" disabled readonly />
            <!-- {{ form.owner }} -->
          </el-form-item>
          <el-form-item label="公司名称" prop="companyName">
            <el-input v-model="form.companyName" placeholder="请输入公司名称" maxlength="50" />
          </el-form-item>
          <el-form-item label="市场活动" prop="marketActivity">
            <el-input v-model="form.marketActivity" maxlength="50" placeholder="请输入市场活动" />
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" placeholder="请输入邮箱" />
          </el-form-item>
          <el-form-item label="部门" prop="department">
            <el-input v-model="form.department" placeholder="请输入部门" />
          </el-form-item>
          <el-form-item label="行业" prop="industryId">
            <el-select v-model="form.industryId" style="width:100%">
              <el-option v-for="cs in Industrys" :key="cs.value" :value="cs.value" :label="cs.label" />
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" type="textarea" maxlength="255" :rows="6" />
          </el-form-item>

        </el-col>
      </el-row>
      <el-row style="text-align:right">
        <el-button plain @click="handleClose">取消</el-button>
        <el-button type="primary" @click="submitForm">保存</el-button>

      </el-row>
    </el-form>

  </el-dialog>
</template>
<script>
import { mapState } from 'vuex'
import { clueStatus, clueSource, Industrys } from '@/utils/enums'
import { updateClue, saveClue } from '@/api/clue'
import RegionSelect from '@/components/RegionSelect'

export default {
  name: 'AddClueDialog',
  components: { RegionSelect },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }

  },
  data() {
    return {
      clueStatus,
      clueSource,
      Industrys,
      form: {
        id: '',
        'address': '',
        'city': '',
        'companyName': '',
        'county': '',
        'department': '',
        'email': '',
        'industryId': '',
        'industryName': '',
        'marketActivity': '',
        'name': '',
        'phone': '',
        'position': '',
        'province': '',
        'remark': '',
        'source': '',
        'status': 1,
        areas: [],
        owner: ''

      },
      rules: {
        name: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],
        companyName: [
          { required: true, message: '公司名称不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapState({
      USER: state => state.user.userInfo,
      title() {
        return this.form.id ? '修改' : '新建'
      }

    })
  },

  mounted() {
    if (this.data.id) {
      // 修改
      if (this.data.province) {
        this.data.areas = [this.data.province, this.data.city, this.data.county]
      }
      this.form = JSON.parse(JSON.stringify(this.data))
    } else {
      this.form.owner = this.USER.userName
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 处理省市区
          if (this.form.areas && this.form.areas.length === 3) {
            this.form.province = this.form.areas[0]
            this.form.city = this.form.areas[1]
            this.form.county = this.form.areas[2]
          }
          // 有id 是修改
          if (this.data.id) {
            updateClue(this.form).then(res => {
              this.$emit('close', true)
              this.$message.success('修改成功')
            }).catch(ex => {
              this.$message({
                type: 'error',
                message: ex.message || '修改失败'
              })
            })
          } else {
            saveClue(this.form).then(res => {
              this.$emit('close', true)
              this.$message.success('新增成功')
            }).catch(ex => {
              this.$message({
                type: 'error',
                message: ex.message || '新增失败'
              })
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.myform{
  padding: 0 20px;
}
</style>
